<template>
  <div class="app-container home">
    <el-card class="update-log">

      <el-form :model="queryParams" size="small" :inline="true">
        <el-form-item label="用户电话号码">
          <el-input
            v-model="queryParams.mobile"
            placeholder="请输入电话号码"
            clearable
            style="width: 240px"/>
        </el-form-item>

        <el-form-item label="支付单号">
          <el-input
            v-model="queryParams.outTradeNo"
            placeholder="请输入支付单号"
            clearable
            style="width: 240px"/>
        </el-form-item>

        <el-form-item label="用户openId">
          <el-input
            v-model="queryParams.buyerId"
            placeholder="请输入用户openId"
            clearable
            style="width: 240px"/>
        </el-form-item>

        <el-form-item label="商品名称">
          <el-input
            v-model="queryParams.body"
            placeholder="请输入商品名称"
            clearable
            style="width: 240px"/>
        </el-form-item>

        <el-form-item label="支付状态">
          <el-input
            v-model="queryParams.tradeState"
            placeholder="请输入支付状态"
            clearable
            style="width: 240px"/>
        </el-form-item>

        <el-form-item label="附加信息">
          <el-input
            v-model="queryParams.moreInfo"
            placeholder="请输入附加信息"
            clearable
            style="width: 240px"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="reset()">重置</el-button>
        </el-form-item>

      </el-form>

      <div slot="header" class="clearfix">
        <span>支付列表</span>
      </div>
      <el-table  v-loading="loading"  :data="records" row-key="id">
        <el-table-column width="110" label="用户电话号码" align="center" prop="mobile"/>
        <el-table-column width="180" label="用户openId" align="center" prop="buyerId"/>
        <el-table-column width="90" label="付费项目" align="center" prop="body"/>
        <el-table-column width="155" label="下单时间" align="center" prop="createTime"/>
        <el-table-column width="200" label="附加信息" align="center" prop="moreInfo"/>
        <el-table-column width="165" label="支付单号" align="center" prop="outTradeNo"/>
        <el-table-column width="80" label="支付金额" align="center" prop="totalFee"/>
        <el-table-column width="90" label="支付状态" align="center" prop="tradeState"/>
        <el-table-column width="160" label="支付时间" align="center" prop="payEndTime"/>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"/>

    </el-card>
  </div>
</template>

<script>
  import {getPayRecords, getLP} from "@/api/weiChat";

  import Cookies from "js-cookie";

  export default {
    data() {
      return {
        loading: true,
        // 查询参数
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          mobile: '',
          outTradeNo: '',
          buyerId: '',
          body: '',
          tradeState: '',
          moreInfo: ''
        },
        records: []
      }
    },
    created() {
      if (Cookies.get('jfT') == undefined) {
        getLP().then(res => {
          Cookies.set('jfT', res.data)
          this.getList()
        })
      } else {
        this.getList()
      }
    },

    methods: {
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },

      reset() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          mobile: '',
          outTradeNo: '',
          buyerId: '',
          body: '',
          tradeState: '',
          moreInfo: ''
        }
        this.getList()
      },

      getList() {
        this.loading = true
        getPayRecords(this.queryParams, Cookies.get('jfT')).then((res) => {
            this.records = res.data.records
            this.total = res.data.total
          this.loading = false
        })
      }
    }
  };
</script>

<style scoped lang="scss">
  .home {
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
</style>

